<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>diagnosite</title>

	<link rel="stylesheet" href="../public/css/reset.css" type="text/css" />
	<link rel="stylesheet" href="../public/css/swiper-3.4.2.min.css" type="text/css" />
	<link rel="stylesheet" href="../public/css/main.css" type="text/css" />
    <link rel="shortcut icon" href="../public/img/q.ico">
</head>
<body>

	
	<header class="menu-wrapper">
		
		<div class="menu">
			<div class="content">
				<h1 class="logo"><a href="javascript:;"></a></h1>
				<ul class="nav">
					<li><a href="javascript:;">about</a></li>
					<li><a href="javascript:;">the team</a></li>
					<li><a href="javascript:;">contact us</a></li>
				</ul>
				<div class="language">
					<a href="javascript:;" class="select"><span>en</span></a>
					<div class="dropdown">
						<a href="en"><span>en</span></a>
						<a href="ch"><span>ch</span></a>
					</div>
				</div>
				<div class="line"></div>
			</div>
			<a href="javascript:;" class="button-3d button-start">
				<div class="state state1">
					<span>Start diagnosis for $100</span>
				</div>
				<div class="state state2">
					<span>Start diagnosis for $100</span>
				</div>
			</a>
		</div>	
	</header>

	<div class="swiper-container" id="swiper">
		<div class="swiper-wrapper">
			<!-- scene1 begin -->
			<div class="swiper-slide scene scene1">
				<div class="middle-bg"></div>
				<img class="light" src="../public/img/scene1/ligth_green.png" alt="" />
				<img class="logo" src="../public/img/scene1/logo_scene1.png" alt="">
				<img class="left" src="../public/img/scene1/light_left.png" alt="">
				<img class="right" src="../public/img/scene1/light_right.png" alt="">

				<div class="scene1-1 center-h">
					<div class="center-v">
						<img src="../public/img/scene1/scena1_center1.png" alt="1" />
						<img src="../public/img/scene1/scena1_center2.png" alt="2" />
						<img src="../public/img/scene1/scena1_center3.png" alt="3" />
					</div>
				</div>
				<div class="arrow">
					<i>Scroll Down</i>
					<img src="../public/img/scene1/icon_keyboard.png" alt="arrow-down">
				</div>
			</div>
			<!-- scene1 end -->
			<!-- scene2 begin -->
			<div class="swiper-slide scene scene2">
				<div class="middle-bg"></div>
				<div class="light"><img src="../public/img/scene2/ligth_purple.png" alt="" /></div>
				<div class="points" id="points">
					<div class="point" data-state='state1'>
						<span>Symptoms?</span>
						<div></div>
					</div>
					<div class="point" data-state='state2'>
						<span>No Results</span>
						<div></div>
					</div>
					<div class="point" data-state='state3'>
						<span>Bored</span>
						<div></div>
					</div>
					<div class="point" data-state='state4'>
						<span>Confused</span>
						<div></div>
					</div>
				</div>
				<div class="prev"></div>
				<div class="next"></div>

				<div class="step scene2-1">
					<div class="center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step1/step_1.png" alt="1" /><br />
							<img src="../public/img/scene2/step1/step_2.png" alt="2" /><br />
							<img src="../public/img/scene2/step1/step_3.png" alt="3" /><br />
							<img src="../public/img/scene2/step1/step_4.png" alt="4" />
						</div>
					</div>
				</div>
				<div class="step scene2-2">
					<div class="left center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step2/step_l.gif" alt="l" />
						</div>
					</div>
					<div class="right center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step2/step_1.png" alt="1" /><br />
							<img src="../public/img/scene2/step2/step_2.png" alt="2" /><br />
							<img src="../public/img/scene2/step2/step_3.png" alt="3" />
						</div>			
					</div>
				</div>
				<div class="step scene2-3 active">
					<div class="left center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step3/step_l.gif" alt="l" />
						</div>
					</div>
					<div class="right center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step3/step_1.png" alt="1" /><br />
							<img src="../public/img/scene2/step3/step_2.png" alt="2" /><br />
							<img src="../public/img/scene2/step3/step_3.png" alt="3" />
						</div>			
					</div>
				</div>
				<div class="step scene2-4">
					<div class="left center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step4/step_l.png" alt="l" />
						</div>
					</div>
					<div class="right center-h">
						<div class="center-v">
							<img src="../public/img/scene2/step4/step_1.png" alt="1" /><br />
							<img src="../public/img/scene2/step4/step_2.png" alt="2" /><br />
							<img src="../public/img/scene2/step4/step_3.png" alt="3" />
						</div>			
					</div>
				</div>
			</div>
			<!-- scene2 end -->
			<!-- scene3 begin -->
			<div class="swiper-slide scene scene3">
				<div class="middle-bg"></div>
				<div class="light"><img src="../public/img/scene3/ligth_orange.png" alt="" /></div>
				<div class="scene3-1 center-h">
					<div class="center-v">
						<img src="../public/img/scene3/step_1.png" alt="1" /><br />
						<img src="../public/img/scene3/step_2.png" alt="2" /><br />
						<img src="../public/img/scene3/step_3.png" alt="3" />
					</div>	
				</div>
				<div class="scene3-2 center-h">
					<div class="center-v">
						<img src="../public/img/scene3/step_4.png" alt="4" /><br />
						<img src="../public/img/scene3/step_5.png" alt="5" /><br />
						<img src="../public/img/scene3/step_6.png" alt="6" />
					</div>	
				</div>
			</div>
			<!-- scene3 end -->
			<!-- scene4 begin -->
			<div class="swiper-slide scene scene4">
				<div class="item">
					<div class="center-h">
						<div class="center-v">
							<img src="../public/img/scene4/icon1_1.png" alt="1-1" /><br />
							<img src="../public/img/scene4/icon1_2.png" alt="1-1" /><br />
							<img src="../public/img/scene4/icon1_3.png" alt="1-1" />
						</div>
					</div>
				</div>
				<div class="item">
					<div class="center-h">
						<div class="center-v">
							<img src="../public/img/scene4/icon2_1.png" alt="2-1" /><br />
							<img src="../public/img/scene4/icon2_2.png" alt="2-1" /><br />
							<img src="../public/img/scene4/icon2_3.png" alt="2-1" />
						</div>
					</div>
				</div>
				<div class="item">
					<div class="center-h">
						<div class="center-v">
							<img src="../public/img/scene4/icon3_1.png" alt="3-1" /><br />
							<img src="../public/img/scene4/icon3_2.png" alt="3-1" /><br />
							<img src="../public/img/scene4/icon3_3.png" alt="3-1" />
						</div>
					</div>
				</div>
			</div>
			<!-- scene4 end -->
			<!-- scene5 begin -->
			<div class="swiper-slide scene scene5">
				<div class="middle-bg"></div>
				<img class="light" src="../public/img/scene1/ligth_green.png" alt="green" />
				<div class="music">
					<img src="../public/img/scene5/scene5_1.png" alt="music">
				</div>
				<div class="content">
					<div class="center-h">
						<div class="center-v">
							<img src="../public/img/scene5/scene5_2.png" alt="">
							<a href="javascript:;" class="button-3d button1">
								<div class="state state1"><span>Start diagnosis for $100</span></div>
								<div class="state state2"><span>Start diagnosis for $100</span></div>
							</a>
	                        <div class="line"></div>
	                        <img src="../public/img/scene5/scene5_3.png" alt="">
	                        <div class="buttons">
	                        	<a href="javascript:;" class="button-3d button2">
									<div class="state state1"><span>Meet the team</span></div>
									<div class="state state2"><span>Meet the team</span></div>
								</a>
								<a href="javascript:;" class="button-3d button2">
									<div class="state state1"><span>Meet the team</span></div>
									<div class="state state2"><span>Meet the team</span></div>
								</a>
	                        </div>
						</div>
					</div>
				</div>
			</div>
			<!-- scene5 end -->
			<div class="swiper-slide footer">
				<div class="principal">
					<div class="middle-bg"></div>
		            <p class="txt1">DO YOU HAVE ANY DOUBTS?</p>
	                <p class="txt2">Contact us at:</p>
	                <p class="txt3">
	                	<a href="javascript:;">contact<span>@</span>diagnosite.com</a>
	                </p>
		        </div>
		        <div class="other">
		            <div class="middle-bg"></div>
		            <img class="left" src="../public/img/logo_footer.png">
		            <p class="txt">All rights reserved to diagno<span>site</span> 2014</p>
		            <div class="right">
		                <span class="txt">A product by</span>
		                <a href="javascript:;"><img src="../public/img/logo_footer2.png"></a>
		            </div>
		        </div>
			</div>
		</div>
        <div class="swiper-scrollbar"></div>
	</div>
	
	<script src="../public/js/jquery-3.1.0.min.js"></script>
	<script src="../public/js/jquery.mousewheel.js"></script>
	<script src="../public/js/swiper-3.4.2.jquery.min.js"></script>
	<script src="../public/js/TweenMax.min.js"></script>
	<script src="../public/js/main.js"></script>
	
</body>
</html>